<template>
  <div class="orderDetail">
    <div class="content">
      <!-- 面包屑 -->
      <div class="bread">
        <router-link :to="linkTo">
          <div class="mar-right-10">我的订单</div>
        </router-link>
        <div class="arrow"></div>
        <div class="mar-right-10">订单详情</div>
      </div>
      <!-- 条件渲染 -->
      <OrderId
        class="commInfo"
        :data="orderIdInfo"
        :type="orderType"
        @close-order="closeOrder"
        @cancel="cancelOrder"
        @revoke="revokeOrder"
        @invite="inviteFriends"
        @pin="again"
        @pay="getUrl"
      />
      <!-- 条件渲染 -->
      <OrderStatus
        class="commInfo"
        :data="orderStatusInfo"
      />
      <!-- 拼单信息 -->
      <div
        class="groupBuying"
        v-if="orderDetail.collageId!=0 && orderDetail.state!=1 && $route.query.type !== '3'"
      >
        <div class="groupBuyTit">拼团信息</div>
        <div class="groupBuyBox">
          <div
            class="result"
            v-if="groupData.state==0"
          >付款成功，待成团
          </div>
          <div
            class="result"
            v-if="groupData.state==1"
          >恭喜您拼团成功
          </div>
          <div
            class="result0 mar-bot-20 fs18"
            v-if="groupData.state==2"
          >未能按时成团，拼团失败
          </div>
          <p v-if="groupData.state ===0 || groupData.state ===2">
            {{ groupData.person }}人团，离拼团成功还差<span>{{ groupData.people }}</span>人
          </p>
          <p v-if="groupData.state ===2">
            拼团失败后，已付金额会原路退回！
          </p>
          <div
            class="surplusTime"
            v-if="groupData.state==0"
          >
            剩余时间：<span class="day time">
              {{ formatHours(groupData.time) }}
            </span>时
            <span class="time">
              {{ formatMinutes(groupData.time) }}
            </span>分
            <span class="time">
              {{ formatSeconds(groupData.time) }}
            </span>秒
          </div>
          <div class="userList">
            <span
              v-for="(item,index) of groupData.personList"
              :key="item.id"
            >
              <i v-if="index === 0">团长</i>
              <img
                :src="item.headImage"
                alt="avatar"
              />
            </span>
            <span
              class="noPeople iconfont"
              v-for="index of groupData.people"
              :key="index + 'n'"
              @click="inviteFriends"
            >
              &#xe64b;
            </span>
          </div>
        </div>
      </div>
      <!-- 录入退货物流 -->
      <RebackExpress
        v-if="orderType === 3 && orderDetail.afterState === 10 && orderDetail.afterType === 2"
        @submit="submitRebackExpress"
      />
      <div
        class="failAfter"
        v-if="orderDetail.afterType === 1"
      >
        <div class="top">
          <h1>拒绝原因：</h1>
          <p>{{ orderDetail.reason }}</p>
        </div>
        <div v-if="orderDetail.afterState != 7" class="btn">
          <el-button @click="platform(orderDetail.afterId, orderDetail.orderId)">申请平台介入</el-button>
        </div>
      </div>
      <ExpressInfo
        class="commInfo"
        :data="orderExpressInfo"
      />
      <OrderInfo
        class="commInfo"
        :data="orderInfos"
      />
      <!-- 售后原因 -->
      <ReasonInfo
        v-if="orderDetail.afterId"
        :data="orderASInfo"
      />

      <!-- 商品列表 -->
      <div class="desc">
        <!-- 商品信息 -->
        <div class="productInfo">
          <div class="top">
            <p class="big"><span>宝贝</span></p>
            <p>宝贝属性</p>
            <p>状态</p>
            <p>数量</p>
            <p>单价</p>
          </div>
          <div
            class="bottom"
            v-for="(pro, idx) in orderDetail.skus"
            :key="idx"
          >
            <div class="big">
              <img
                :src="pro.image"
                alt=""
              />
              <p>{{ pro.productName }}</p>
            </div>
            <div style="flex-direction: column;">
              <p
                v-for="(proText, ins) in pro.values"
                :key="ins"
              >{{ proText }}</p>
            </div>
            <div class="colorRed">
              {{ formateOrderState(orderDetail.state) }}
            </div>
            <div>{{ pro.number }}</div>
            <div class="fs-bold">¥{{ pro.price }}</div>
          </div>
        </div>
      </div>
      <!-- 条件渲染 -->
      <OrderPay
        class="commInfo"
        :data="orderPayInfo"
        :type="orderType"
      />
      <!-- 物流信息 -->
      <div
        class="logistics"
        v-if="orderDetail.state >= 3 && orderDetail.express && orderDetail.deliverFormid"
      >
        <p class="fs16 font-color-333"></p>
        <div class="content">
          <div class="top">
            <p class="title">物流信息</p>
            <p class="com">发货方式：快递</p>
            <p class="com">物流公司：{{ orderDetail.express || '查询失败' }}</p>
            <p class="com">运单号码：{{ orderDetail.deliverFormid || '暂无物流单号' }}</p>
          </div>
          <div class="bottom">
            <div class="title">物流跟踪：</div>
            <div class="dilevery">
              <el-steps
                direction="vertical"
                :active="1"
                space="100"
              >
                <el-step
                  :title="item.time+'：'+item.reason"
                  v-for="(item, index) in dilevery"
                  :key="index"
                >
                  <template #icon>
                    {{ dilevery.length - index }}
                  </template>
                </el-step>
              </el-steps>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 取消订单 -->
    <el-dialog
      title="提示"
      v-model="closeOrderDialog"
      width="30%"
      :before-close="closeOrderBtn"
    >
      <span>是否取消该订单?</span>
      <template #footer>
        <el-button @click="closeOrderDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="cancelOrder"
        >确 定
        </el-button>
      </template>
    </el-dialog>
    <!-- 邀请好友 -->
    <el-dialog
      v-model="inviteDialog"
      width="30%"
      :before-close="inviteDialogClose"
    >
      <div class="inviteDialog">
        <div class="inviteTit">邀请好友</div>
        <div class="imgCode">
          <img
            :src="share.qrcode"
            alt=""
          />
        </div>
        <!-- <p>扫描下方二维码或复制链接分享给好友吧</p>
        <div class="linkBox">
          <span class="linkAddress">www.1234567.com</span>
          <span class="copyBtn">复制</span>
        </div> -->
      </div>
    </el-dialog>
    <!-- 微信支付 -->
    <el-dialog
      class="weChat"
      :title="`请使用微信扫一扫支付￥${payInfo.money}`"
      v-model="weChatDialog"
      :before-close="handleClose"
      center
      width="30%"
    >
      <div class="weChatBox">
        <div class="qCode">
          <img
            :src="payInfo.url"
            alt=""
          />
          <img
            src="../../assets/images/weiXintit.png"
            alt=""
          />
        </div>
        <div class="weChatInfo">
          <img
            src="../../assets/images/imgPay.png"
            alt=""
          />
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="申请平台介入"
      v-model="visible.intervention"
      width="37%"
      center
    >
      <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="query.reason" maxlength="200" />
      <div class="itemBox upload">
        <el-upload
          :action="action"
          list-type="picture-card"
          :limit="3"
          :on-success="handleSuccess"
          :on-remove="handleRemove">
          <el-icon><Plus /></el-icon>
          <span>最多上传3张</span>
        </el-upload>
      </div>
      <template #footer>
        <el-button type="primary" @click="interventionFn">确 定</el-button>
        <el-button @click="closeIntervention">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { useUser } from '@/store/user'
import { RouterLink } from 'vue-router'
import OrderId from '@/views/orderDetail/components/orderid.vue'
import OrderStatus from '@/views/orderDetail/components/status.vue'
import ExpressInfo from '@/views/orderDetail/components/expressInfo.vue'
import OrderInfo from '@/views/orderDetail/components/orderInfo.vue'
import ReasonInfo from '@/views/orderDetail/components/reasonInfo.vue'
import RebackExpress from '@/views/orderDetail/components/rebackExpress.vue'
// import ProductList from '@/views/orderDetail/components/prodcutlist.vue'
import OrderPay from '@/views/orderDetail/components/payInfo.vue'
// 格式化响应数据为组件所需数据
import {
  formateASInfo,
  formateExpressInfo,
  formateIdInfo,
  formateOrderInfo,
  formateOrderState,
  formatePayInfo,
  formateStatusInfo
} from '@/views/orderDetail/data-formate.js'
import {
  requestPlatform
} from '@/api/user/afterSale.js'

import { getUserInfo } from '@/api/user/user.js'
import { checkOrderResult, getOrderDetail, orderCancel, orderPayCode } from '@/api/user/order.js'
import { getAfterSaleDetail, postRefund, postReGoods } from '@/api/user/afterSale.js'
import { getExpressCompany, getExpressData, postExpress } from '@/api/user/express.js'
import { inviteGroup } from '@/api/Activity/ActivityGroup.js'
import { onMounted, ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLoading } from '@/hooks/useLoading'

const { showLoading, closeLoading } = useLoading()

const linkTo = ref('/myOrder')
const orderDetail = ref({})
const orderId = ref('')
const dilevery = ref([])
const endTime = ref('')
const closeOrderDialog = ref(false)
const inviteDialog = ref(false)
const share = ref({})
const groupData = ref({})
const setTime = ref(null)
const endTime1 = ref('')
const noticeId = ref('')
const weChatDialog = ref(false)
const payInfo = ref({})
const chatTimer = ref(null)
const orderType = ref(0) // 订单类型
const orderState = ref(null)
const orderIdInfo = ref({})
const orderStatusInfo = ref({})
const orderExpressInfo = ref({})
const orderInfos = ref({})
const orderPayInfo = ref({})
const orderASInfo = ref({})

const userStore = useUser()
const route = useRoute()
const action = upload
const urls = ref([])
import {
  upload
} from '@/api/upload.js'
import { ElMessage } from 'element-plus'

let visible = reactive({
  intervention: false,
})

onMounted(() => {
  if (route.query.type === '3') {
    handleGetAfterSaleDetail()
  } else {
    handleGetOrderDetail()
  }
})

function handleInit () {
  orderId.value = route.query.orderId
  if (route.query.noticeId) {
    noticeId.value = route.query.noticeId
  }
}

async function getUserInfoData () {
  const response = await getUserInfo()
  const res = response.data
  if (res.code === '200') {
    userStore.setUserInfo(res.data)
  }
}

// 倒计时
function countDown () {
  clearInterval(setTime.value)
  setTime.value = setInterval(() => {
    if (groupData.value.time >= 1000) {
      groupData.value.time -= 1000
    } else {
      groupData.value.time = 0
      clearInterval(setTime.value)
      window.location.reload()
    }
  }, 1000)
}

// 获取订单详情
async function handleGetOrderDetail () {
  linkTo.value = '/myOrder'
  showLoading()
  try {
    const response = await getOrderDetail({
      orderId: orderId.value,
      noticeId: noticeId.value
    })
    const res = response.data
    if (res.code === '200') {
      orderState.value = res.data.state
      if (res.data.collageId) {
        orderType.value = 1 // 拼团
        orderState.value = res.data.collageDetail.state
      }
      if (res.data.afterState) {
        orderType.value = 3 // 售后
        orderState.value = res.data.afterState
      }
      formateData(res)
      orderDetail.value = res.data
      groupData.value = res.data.collageDetail
      endTime.value = res.data.time
      getDilevery()
      if (groupData.value.time) {
        endTime1.value = groupData.value.time
      }
      if (groupData.value.time >= 1000 && res.data.state === 6 && groupData.value.state === 0) {
        countDown()
      }
      getUserInfoData()
    } else {
      ElMessage.warning(res.message)
    }
  } finally {
    closeLoading()
  }
}

// 获取售后订单详情
async function handleGetAfterSaleDetail () {
  linkTo.value = '/orderAfterSale'
  showLoading()
  try {
    const response = await getAfterSaleDetail({
      afterId: route.query.afterId,
      orderId: route.query.orderId
    })
    const res = response.data
    if (res.code === '200') {
      orderType.value = 3 // 设置订单详情类型
      formateData(res)
      orderDetail.value = res.data
      if (res.data.orderState) {
        orderDetail.value.state = res.data.orderState
      }
      getDilevery()
      getExpressCom()
      // image.v = res.data.image.split(',')
    } else {
      ElMessage.warning(res.message)
    }
  } finally {
    closeLoading()
  }
}

// 格式化数据
function formateData (res) {
  orderIdInfo.value = formateIdInfo(res.data) // 订单号
  orderStatusInfo.value = formateStatusInfo(res.data) // 订单状态
  orderInfos.value = formateOrderInfo(res.data) // 订单信息
  orderPayInfo.value = formatePayInfo(res.data) // 结算信息
  orderExpressInfo.value = formateExpressInfo(res.data) // 收货信息
  if (res.data.afterId) {
    orderASInfo.value = formateASInfo(res.data)
  }
}


// 提交退货物流信息
function submitRebackExpress (data) {
  postExpress({
    orderId: orderDetail.value.orderId,
    afterId: orderDetail.value.afterId,
    deliverFormid: data.deliverFormid,
    express: data.express
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      ElMessage.success('提交成功！')
      location.reload()
    } else {
      ElMessage.warning(res.message)
    }
  })
}

// 查询物流信息
function getDilevery () {
  if (!orderDetail.value.express || !orderDetail.value.deliverFormid) {
    return
  }
  getExpressData({
    express: orderDetail.value.express,
    deliverFormid: orderDetail.value.deliverFormid
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      dilevery.value = res.data
    } else {
      ElMessage.warning(res.message)
    }
  })
}

// 查询物流公司字典
function getExpressCom () {
  if (!orderDetail.value.express || !orderDetail.value.deliverFormid) {
    return
  }
  getExpressCompany().then(response => {
    const res = response.data
    res.data.forEach(item => {
      if (item.dictId === orderDetail.value.express) {
        orderDetail.value.expressCompany = item.dictName
      }
    })
  })

}

// 取消订单
function cancelOrder () {
  orderCancel({
    orderId: orderDetail.value.orderId
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      closeOrderDialog.value = false
      handleGetOrderDetail()
    } else {
      ElMessage.warning(res.message)
    }
  })
}


// 取消订单
function closeOrder () {
  closeOrderDialog.value = true
}

// 邀请好友
function inviteFriends () {
  inviteGroup({
    collageId: orderDetail.value.collageId,
    orderId: orderDetail.value.orderId,
    productId: orderDetail.value.skus[0].productId,
    skuId: orderDetail.value.skus[0].skuId,
    shopGroupWorkId: orderDetail.value.shopGroupWorkId,
    type: 0
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      share.value = res.data
    }
  }).finally(() => {
    inviteDialog.value = true
  })
}

function closeOrderBtn () {
  closeOrderDialog.value = false
}

function inviteDialogClose () {
  inviteDialog.value = false
}

const router = useRouter()

// 再次开团
function again () {
  let data = {
    shopId: orderDetail.value.shopId,
    productId: orderDetail.value.skus[0].productId,
    skuId: orderDetail.value.skus[0].skuId
  }
  router.push({
    path: '/productDetail',
    query: {
      proData: JSON.stringify(data)
    }
  })
}

// 撤销申请
function revokeOrder () {
  if (!orderDetail.value.afterType) {
    return
  }
  let fn
  if (orderDetail.value.afterType === 1) {
    fn = postRefund
  }
  if (orderDetail.value.afterType === 2) {
    fn = postReGoods
  }
  fn({
    afterId: orderDetail.value.afterId,
    orderId: orderDetail.value.orderId
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      ElMessage.success('撤销成功！')
      location.reload()
    } else {
      ElMessage.error(res.message)
    }
  })
}

// 付款
function getUrl () {
  // 获取支付二维码
  orderPayCode({
    orderId: orderDetail.value.orderId
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      payInfo.value = res.data
      weChatDialog.value = true
      chatTimer.value = setInterval(() => {
        checkPay(res.data)
      }, 3000)
    } else {
      ElMessage.error(res.message)
    }
  })
}

// 取消支付
function handleClose () {
  ElMessageBox.confirm(
    '确认取消支付？',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(_ => {
      clearInterval(chatTimer.value)
      weChatDialog.value = false
    })
    .catch(_ => {
    })
}

// 确认支付结果
function checkPay (data) {
  setTimeout(() => {
    // 确认支付结果
    checkOrderResult({
      collageId: data.collageId,
      money: data.money,
      orderId: data.orderId,
      type: 2
    }).then(response => {
      const res = response.data
      if (res.code === '200') {
        if (res.data.code === 'SUCCESS') {
          ElMessage({
            message: '支付成功！',
            type: 'success'
          })
          clearInterval(chatTimer.value)
          weChatDialog.value = false
          handleGetOrderDetail()
        }
      } else {
        clearInterval(chatTimer.value)
        ElMessage({
          message: res.message,
          type: 'error'
        })
        weChatDialog.value = false
      }
    })
  }, 0)
}

function formatHours (value) {
  let hours = Math.floor(value / (1000 * 60 * 60))
  if (hours < 10 && hours > 0) {
    return '0' + hours
  } else if (hours > 10) {
    return hours
  } else {
    return '00'
  }
}

function formatMinutes (value) {
  let minutes = Math.floor((value % (1000 * 60 * 60)) / (1000 * 60))
  if (minutes < 10 && minutes > 0) {
    return '0' + minutes
  } else if (minutes > 10) {
    return minutes
  } else {
    return '00'
  }
}

function formatSeconds (value) {
  let seconds = Math.round((value % (1000 * 60)) / 1000)
  if (seconds < 10 && seconds > 0) {
    return '0' + seconds
  } else if (seconds > 10) {
    return seconds
  } else {
    return '00'
  }
}

handleInit()

/**
 * 平台介入
 */
let query = reactive({
  afterId: '', // 售后订单id
  orderId: '', // 订单id
  reason: '',
  image: '',
})
function platform (afterId, orderId) {
  query.afterId = afterId
  query.orderId = orderId
  visible.intervention = true
}
function closeIntervention () {
  query.afterId = ''
  query.orderId = ''
  query.reason = ''
  query.image = ''
  visible.intervention = false
}
// 申请平台介入
function interventionFn () {
  if (urls.value.length === 0) {
    ElMessage.error('请上传图片!')
    return
  }
  query.image = urls.value.join(',')
  requestPlatform(query).then(response => {
    const res = response.data
    if (res.code === '200') {
      ElMessage.success('申请平台介入成功')
      visible.intervention = false
      window.location.reload()
    } else {
      ElMessage.error(res.message)
    }
  }).catch(err => {
    ElMessage.error(err.message)
  })
}
const handleSuccess = (res) => {
  urls.value.push(res.data.url)
}
const handleRemove = (file, fileList) => {
  urls.value = []
  for (var i in fileList) {
    urls.value.push(fileList[i].response.data.url)
  }
}

</script>
<style lang="scss">
.orderDetail {
  width: 100%;

  .content {
    width: 1252px;
    margin: 0 auto;

    .bread {
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      display: flex;
      align-items: center;

      .arrow {
        background-image: url('../../../static/image/xiangyou@2x.png');
        width: 5px;
        height: 10px;
        margin-right: 10px;
      }
    }

    .commInfo {
      margin: 10px 0;
    }

    .failAfter {
      width: 100%;
      min-height: 200px;
      margin: 20px 0;

      .top {
        min-height: 110px;
        padding: 20px 30px;
        background-color: #F5F5F5;

        h1 {
          font-size: 16px;
          color: #C83732;
        }

        p {
          font-size: 14px;
          color: #333333;
          margin-top: 20px;
        }
      }

      .el-button {
        display: block;
        width: 200px;
        height: 50px;
        margin: 20px auto 0;
        color: #FFEBC4;
        background-color: #333333;
        border-radius: 0px;
      }
    }

    .status {
      width: 100%;
      height: 325px;
      border: 1px solid #E5E5E5;
      box-sizing: border-box;
      padding: 15px;
      display: flex;
      margin-bottom: 20px;
    }

    // 物流快递
    .logistics {
      width: 100%;
      box-sizing: border-box;
      margin-bottom: 20px;
      background-color: #FAFAFA;

      .content {
        .top {
          height: 80px;
          padding: 0 30px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #E5E5E5;

          .title {
            flex: 1;
          }

          .com {
            margin: 0 8px;
          }

          p {
            font-size: 16px;
            color: #666666;
          }
        }

        .bottom {
          padding: 25px 30px;
          box-sizing: border-box;
          display: flex;

          .dilevery {
            flex: 1;
            height: 280px;
            overflow-x: auto;
            padding: 20px;
            box-sizing: border-box;

            .el-step {
              .el-step__head {
                height: 100%;
              }
            }
          }
        }
      }
    }

    // 商品
    .desc {
      width: 100%;
      border: 1px solid #E5E5E5;
      margin: 20px 0;

      .receivingInfo, .storeInfo, .orderInfo {
        padding: 25px;
        border-bottom: 1px solid #E5E5E5;

        .title {
          font-size: 16px;
          margin-bottom: 25px;
        }

        .info {
          display: flex;
          margin-left: 75px;
          flex-wrap: wrap;

          p {
            line-height: 30px;
            width: 50%;
            font-size: 14px;
          }
        }
      }

      .orderInfo, .receivingInfo {
        .info {
          p {
            width: 33.33%;
          }
        }
      }

      .productInfo {
        width: 100%;

        .top {
          height: 40px;
          width: 100%;
          color: #FFFFFF;
          background-color: #333333;
          display: flex;
          align-items: center;
          text-align: center;

          p {
            flex: 1;
            font-size: 12px;
          }

          .big {
            flex: 2;
            text-align: left;

            span {
              margin-left: 20px;
            }
          }
        }

        .bottom {
          width: 100%;
          padding: 20px 0;
          box-sizing: border-box;
          text-align: center;
          display: flex;
          border-bottom: 1px solid #E5E5E5;

          div {
            flex: 1;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;

            p {
              font-size: 14px;
              line-height: 20px;
            }
          }

          .colorRed {
            color: #C83732;
          }

          .big {
            text-align: left;
            flex: 2;
            display: flex;
            box-sizing: border-box;
            justify-content: flex-start;
            align-items: center;

            img {
              width: 80px;
              height: 80px;
              margin: 0 20px;
            }

            p {
              width: 50%;
            }
          }
        }
      }
    }
  }

  .groupBuying {
    border: 1px solid #F3F4F5;
    height: 325px;
    padding: 20px;
    margin-bottom: 20px;

    .groupBuyTit {
      font-size: 16px;
      color: #333333;
      font-weight: bold;
    }

    .groupBuyBox {
      text-align: center;
      margin-top: 30px;

      .result {
        font-size: 18px;
        margin-bottom: 20px;
      }

      .result0 {
        color: #C83732;
      }

      p {
        font-size: 14px;
        color: #333333;
        margin-bottom: 20px;

        span {
          color: $mainGlod;
          font-size: 14px;
          font-weight: normal;
        }
      }

      .surplusTime {
        margin-bottom: 30px;
        font-size: 16px;
        color: #666666;
        display: flex;
        justify-content: center;
        align-items: center;

        .day {
          margin-left: 10px;
        }

        .time {
          color: $mainGlod;
          background-color: #333;
        }

        span {
          border: 1px solid #E5E5E5;
          border-radius: 2px;
          display: block;
          width: 24px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          margin: 0 8px;
        }
      }

      .userList {
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          display: block;
          width: 76px;
          height: 76px;
          position: relative;
          margin: 0 13px;
          border-radius: 50%;
          box-sizing: border-box;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }

          i {
            position: absolute;
            left: 8px;
            bottom: -10px;
            width: 60px;
            height: 24px;
            background: linear-gradient(88deg, #C5AA7B 0%, #FFEBC4 100%);
            border-radius: 12px;
            font-style: normal;
            text-align: center;
            line-height: 24px;
            color: #FFFFFF;
            font-size: 14px;
          }
        }

        .noPeople {
          border: 1px dashed #E5E5E5;
          color: #DBDBDB;
          font-size: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        span:first-child {
          border: 1px solid $mainGlod;
        }
      }
    }
  }

  .inviteDialog {
    text-align: center;

    .inviteTit {
      font-size: 22px;
      color: #444444;
    }

    .imgCode {
      width: 200px;
      height: 200px;
      margin: 0 auto;

      img {
        width: 100%;
        height: 100%;
      }
    }

    p {
      margin: 25px 0;
    }

    .linkBox {
      display: flex;
      justify-content: center;

      .linkAddress {
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        display: block;
        width: 220px;
        text-align: left;
        border: 1px solid #E5E5E5;
      }

      .copyBtn {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #FFFFFF;
        border: 1px solid $mainGlod;
        color: $mainGlod;
        margin-left: 20px;
        cursor: pointer;
      }
    }
  }

  .weChatBox {
    display: flex;

    img {
      width: 100%;
    }

    .qCode {
      width: 50%;
      text-align: center;

      img {
        width: 80%;
      }
    }

    .weChatInfo {
      width: 50%;
    }
  }

  .weChat {
    :deep(.el-dialog__body) {
      background: #FFFFFF;
    }
  }

  .itemBox{
      width: 580px;
      display: flex;
      margin: 10px;
      .title{
        min-width: 80px;
        line-height: 40px;
        text-align: right;
      }
      :deep(.el-input__icon){
        color: $mainGlod;
      }
  }

  .upload{
    display: flex;
    .title{
      line-height: 40px;
    }
    .el-upload--picture-card {
      height: 140px;
      background-color: #FFF;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      i{
        font-size: 32px;
        margin-bottom: 1px;
      }
      &:hover{
        i{
        color: $mainGlod;
        }
      }
    }
  }
}
</style>
